<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端测试 - 圣经应用</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .test-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .test-title {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 24px;
        }
        
        .test-item {
            margin-bottom: 16px;
            padding: 12px;
            border: 1px solid #e4e7ed;
            border-radius: 8px;
            background: #f8f9fa;
        }
        
        .test-item h3 {
            margin: 0 0 8px 0;
            color: #1890ff;
        }
        
        .test-item p {
            margin: 0;
            color: #606266;
            line-height: 1.5;
        }
        
        .status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status.success {
            background: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        
        .status.warning {
            background: #fff7e6;
            color: #faad14;
            border: 1px solid #ffd591;
        }
        
        .device-info {
            background: #e6f7ff;
            border: 1px solid #91d5ff;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .device-info h4 {
            margin: 0 0 8px 0;
            color: #1890ff;
        }
        
        .device-info p {
            margin: 4px 0;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1 class="test-title">移动端兼容性测试</h1>
        
        <div class="device-info">
            <h4>设备信息</h4>
            <p><strong>屏幕宽度：</strong><span id="screen-width"></span>px</p>
            <p><strong>屏幕高度：</strong><span id="screen-height"></span>px</p>
            <p><strong>用户代理：</strong><span id="user-agent"></span></p>
            <p><strong>设备类型：</strong><span id="device-type"></span></p>
        </div>
        
        <div class="test-item">
            <h3>响应式布局 <span class="status success">✓ 已实现</span></h3>
            <p>应用会根据屏幕宽度自动调整布局，支持从320px到1200px+的各种屏幕尺寸。</p>
        </div>
        
        <div class="test-item">
            <h3>移动端菜单 <span class="status success">✓ 已实现</span></h3>
            <p>移动端使用滑动侧边栏替代固定侧边栏，提供更好的触摸体验。</p>
        </div>
        
        <div class="test-item">
            <h3>触摸优化 <span class="status success">✓ 已实现</span></h3>
            <p>按钮尺寸和间距已针对触摸操作进行优化，支持手势操作。</p>
        </div>
        
        <div class="test-item">
            <h3>搜索功能 <span class="status success">✓ 已实现</span></h3>
            <p>搜索对话框在移动端使用全屏设计，搜索选项改为垂直布局。</p>
        </div>
        
        <div class="test-item">
            <h3>字体和间距 <span class="status success">✓ 已实现</span></h3>
            <p>移动端字体大小和间距已优化，确保良好的可读性。</p>
        </div>
        
        <div class="test-item">
            <h3>性能优化 <span class="status success">✓ 已实现</span></h3>
            <p>使用CSS transform进行动画，优化事件处理，避免内存泄漏。</p>
        </div>
        
        <div class="test-item">
            <h3>浏览器兼容性 <span class="status warning">⚠ 需要测试</span></h3>
            <p>支持现代浏览器，建议在Chrome、Safari、Firefox等主流浏览器中测试。</p>
        </div>
        
        <div style="text-align: center; margin-top: 32px;">
            <p style="color: #909399; font-size: 14px;">
                请在移动设备或浏览器开发者工具的移动端模式下测试完整功能
            </p>
        </div>
    </div>

    <script>
        // 获取设备信息
        function updateDeviceInfo() {
            document.getElementById('screen-width').textContent = window.innerWidth;
            document.getElementById('screen-height').textContent = window.innerHeight;
            document.getElementById('user-agent').textContent = navigator.userAgent;
            
            // 检测设备类型
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            document.getElementById('device-type').textContent = isMobile ? '移动设备' : '桌面设备';
        }
        
        // 页面加载时更新设备信息
        updateDeviceInfo();
        
        // 窗口大小变化时更新设备信息
        window.addEventListener('resize', updateDeviceInfo);
        
        // 添加一些交互效果
        document.querySelectorAll('.test-item').forEach(item => {
            item.addEventListener('click', function() {
                this.style.transform = 'scale(0.98)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 150);
            });
        });
    </script>
</body>
</html> 